<template>
  <div>
    <!-- 搜索 -->
    <!-- 供应商信息维护--车厂-->
    <TopFilter ref="TopFilterss" :list="topFilterInit" :cols="3" :collapse="collapse" labelWidth="120"
      @filterChange="changeHandle" @resetChange="resetHandle"></TopFilter>
    <!-- table -->
    <FilterTable ref="table" :columns="columns" :params="fetchParams" :dataSource="dataList" :datakey="'records'"
      :fetchapi="fetchApi" :onColumnsChange="columns => (this.columns = columns)" :onRowSelectChange="selectChange"
      :is-select-column="false">
    </FilterTable>
    <!-- 供应商选择 -->
    <BaseDialog :visible.sync="suppliers" :title="'供应商选择'" width="850px" destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <supplier @close="suppliersClose" @save="suppliersSave"></supplier>
    </BaseDialog>
    <!-- 编辑页面 -->
    <Drawer :visible.sync="visibleEdit" :title="'供应商信息维护'" destroyOnClose width="60%"
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Edit @close="close" :rowData="mrId" :userId='userId'></Edit>
    </Drawer>
  </div>
</template>
<script>

import moment from "moment";
import { getUserInfo } from '@/api/login/index';
import Edit from './Edit.vue';
import supplier from './supplier.vue';
import { getListByPage } from '@/api/repair/repairBusiness/supplierInformation';
import { getAppId } from '@/assets/js/auth';
import { dictionary } from '@/utils/dictMixin';
export default {
  mixins: [dictionary],
  components: {
    Edit,
    supplier,
  },
  data() {
    return {
      mrId: null,
      dataList: [],
      userId: '',
      selectDealerData: [],
      suppliers: false,
      dealerData: [],
      visibleEdit: false,
      collapse: false,
      topFilterInit: this.topFilterInitFun(),
      fetchApi: getListByPage,
      columns: this.creatHeader(),
      fetchParams: {
        xhrAbort: false,
      }, //ipa 接口
      selectedRows: [], //选中服务站
    };
  },
  async created() {
    this.init();
  },
  methods: {
    //获取用户信息
    init() {
      //用户信息
      getUserInfo().then(res => {
        if (res.resultCode === 200) {
          this.userInfo = res.data.userInfo;
        } else {
          this.$notify.error({ title: '提示信息', message: '获取用户名失败!' });
        }
        // console.log('this.userInfo', this.userInfo)
        // console.log('this.userInfo', this.userInfo.userId)
        this.userId = this.userInfo.userId;
      })
    },
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
      console.log("changeHandle =====> " + JSON.stringify(val));
    },
    //重置
    resetHandle(val) {
      this.dealerData = [];
      this.selectDealerData = [];
      this.fetchParams = Object.assign({}, val);
    },
    //供应商选择
    selectSuppliersCode() {
      this.suppliers = true;
    },
    suppliersClose() {
      this.suppliers = false;
    },
    suppliersSave(obj) {
      //console.log(obj[0].bjgybm)
      this.topFilterInit.find(x => x.fieldName == 'supplierCode').initialValue = obj[0].supplierCode;
      this.topFilterInit.find(x => x.fieldName == 'supplierName').initialValue = obj[0].supplierName;
      this.suppliers = false;
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      console.log(this.selectedRows);
    },
    close(data) {
      this.visibleEdit = data.visibleEdit;
      if (data && data.type === 'save') {
        this.changeHandle(this.fetchParams);
      }
    },
    chooseOrderNo(val) {
      this.mrId = val;
      console.log("编辑ID", val)
      this.visibleEdit = true;
    },
    topFilterInitFun() {
      return [
        {
          type: 'INPUT',
          label: '供应商代码',
          fieldName: 'supplierCode',
          placeholder: '请选择供应商代码...',
          initialValue: '',
          unitRender: p => {
            return (
              <div>
                <multiuse-button icon="el-icon-search" onClick={() => this.selectSuppliersCode()} />
              </div>
            );
          }
        },
        {
          type: 'INPUT',
          label: '供应商名称',
          fieldName: 'supplierName',
          placeholder: '请输入供应商名称...',
          initialValue: '',
        },
        {
          type: 'SELECT',
          label: '供应商类型',
          fieldName: 'isInterior',
          placeholder: '请选择供应商类型...',
          itemList: [
            { text: '内部', value: 10041001 },
            { text: '外部', value: 10041002 }
          ],
        }
      ];
    },

    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          width: 100,
          dataIndex: 'column-action',
          render: (props, h) => {
            return (
              <div style="text-align:center">
                <multiuse-button size="mini" type="text" onClick={() => this.chooseOrderNo(props.row)} >
                  修改
                </multiuse-button>
              </div>
            );
          }
        },
        { title: '供应商代码', dataIndex: 'supplierCode', sorter: true },
        { title: '供应商名称', dataIndex: 'supplierName', sorter: true, width: 250 },
        {
          title: '供应商类型',
          dataIndex: 'isInterior',
          sorter: true,
          dictItems: [
            { text: '内部', value: 10041001 },
            { text: '外部', value: 10041002 }
          ],
        },

        { title: '供应商工时单价', dataIndex: 'hourPrice', sorter: true, width: 150 },
        { title: '供应商管理费率%', dataIndex: 'manageRate', sorter: true, width: 150 },
        { title: 'K系数', dataIndex: 'krate', sorter: true, width: 150 },
        {
          title: '启用状态',
          dataIndex: 'status',
          sorter: true,
          dictItems: [
            { text: '启用', value: 55981001 },
            { text: '停用', value: 55981002 }
          ],
        },
        { title: '更新人', dataIndex: 'updatedBy', sorter: true },
        { title: '更新时间', dataIndex: 'updatedAt', sorter: true, width: 220 }
      ];
    }
  }
};
</script>

<style lang="less" scoped>

</style>
